<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>bootstrapfileinput</title>
    <link href="resources/css/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="resources/css/plugins/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="resources/js/jquery-2.1.1.js"></script>
    <script src="resources/js/plugins/bootstrap-fileinput/fileinput.js" type="text/javascript"></script>
    <script src="resources/js/plugins/bootstrap-fileinput/fileinput_locale_zh.js"></script>
    <script src="resources/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
    <form enctype="multipart/form-data">
        <div class="form-group col-md-3">
            <input id="file-4" type="file" multiple  class="file" data-upload-url="#">
        </div>
    </form>
</div>

</body>
<script>
    $("#file-4").fileinput({
        uploadExtraData: {kvId: '10'},
        maxFileSize : 3000,
        maxFileCount: 100,
        maxFilesNum : 10,
    });
    $(".btn-warning").on('click', function() {
        if ($('#file-4').attr('disabled')) {
            $('#file-4').fileinput('enable');
        } else {
            $('#file-4').fileinput('disable');
        }
    });
    $(".btn-info").on('click', function() {
        $('#file-4').fileinput('refresh', {previewClass:'bg-info'});
    });
</script>
</html>